<template>
  <div class="about">
    <div class="header">
      <h4>加班/休假</h4>
    </div>
    <div class="cen">
      <!-- 中间的描述 -->
      <div class="pp">
        <span class="iconfont icon-daichuli"></span>
        <span>待处理</span>
      </div>
      <div class="pp">
        <span class="iconfont icon-yifaqi"></span>
        <span>已发起</span>
      </div>
      <div class="pp">
        <span class="iconfont icon-wancheng"></span>
        <span>已处理</span>
      </div>
    </div>
    <!-- 切换 -->
  <div class="qh">
    <span>加班</span><span>休假</span>
  </div> 
 
  <div class="list">
    <div class="item">
      <div class="one">
        <span>cbasjidkm</span><span class="iconfont icon-jiazai">待审核</span>
      </div>
      <div class="one">
        <span>申请人 刘宇</span><span>加班类型：工作日加班</span>
      </div>
      <div class="one">
        <span>加班日期2019/5/10</span><span>加班时数 5.0</span>
      </div>
    </div>

    <div class="item">
      <div class="one">
        <span>sbjaibjkdcs</span><span class="iconfont icon-jiazai">待审核</span>
      </div>
      <div class="one">
        <span>申请人 刘宇</span><span>加班类型：工作日加班</span>
      </div>
      <div class="one">
        <span>加班日期2019/5/10</span><span>加班时数 3.0</span>
      </div>
    </div>

    <div class="item">
      <div class="one">
        <span>uhonaknCSLk</span><span class="iconfont icon-jiazai">待审核</span>
      </div>
      <div class="one">
        <span>申请人 刘宇</span><span>加班类型：工作日加班</span>
      </div>
      <div class="one">
        <span>加班日期2019/5/10</span><span>加班时数 8.0</span>
      </div>
    </div>
  </div>
   <div class="block">
     <span @click="showflag=true">+发起请求</span>
   </div>
   <Ovetime v-show="showflag" @add="showflag=false"></Ovetime>
  </div>
</template>
<script>
import Ovetime from '../components/ovetime'
export default {
    data() {
      return {
        showflag:false
      }
    },
    components:{
      Ovetime
    },
    methods: {
      
    },
}
</script>
<style lang="scss">
*{
  padding: 0;
  margin: 0;
}
  .about{
    width: 100%;
    height: 100%;
    background: #eee;
    position: absolute;
  }
  .header{
    height: 50px;
    background: #fff;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
  }
  .block{
    width: 130px;
    height: 50px;
    border-radius: 25px;
    background: green;
    color: #fff;
    text-align: center;
    line-height: 50px; 
    position: relative;
    bottom: -50px;
    right: -270px;
  }
  .cen{
    height: 70px;
    display: flex;
    justify-content:space-around;
    padding: 10px 20px;
    background: #fff;
  }
  .pp{
    display: flex;
    flex-direction: column;
    font-size: 20px;
    color: #ccc;
    .iconfont{
      font-size: 20px;
    }
  }
  .pp:nth-child(1){
    color: green;
  }
  .qh{
    display: flex;
    width: 70%;
    height: 50px;
    line-height: 50px;
    background: #fff;
    margin-left: 15%;
    margin-top: 20px;
    border-radius: 20px 20px;
    span{
      display: block;
      width: 50%;
      height: 100%;
      text-align: center;
      border-radius: 20px 0 0 20px;
    }
  }
  .qh span:nth-child(1){
    background: green;
      text-align: center;
      color: #fff;
  }
  .list{
    height: auto;
    margin-top: 10px;
  }
  .item{
    height: 110px;
    background: #fff;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    .one{
      display: flex;
      justify-content:space-between;
      padding: 2px 10px;
      margin-top: 10px;
      .iconfont{
        color: orangered;
      }
    }
  }
</style>
